<template>
  <div class="home">
    <cart-header @delBtn="isPay=!isPay" @show="show=true"></cart-header>
    <div class="count">
      <cart-list :cartList="list" @btnchange="btnchange"></cart-list>
    </div>
    <div class="home_foot">
       <label><input type="checkbox" v-model="allCheck" @change="allFtn">全选</label>
       <span>总价：{{allPrice}}</span>
       <span @click="delect">{{isPay?'去支付':'删除'}}：{{allNum}}</span>
       <!-- <span v-else>删除选中：0</span> -->
    </div>
  </div>
 <van-popup v-model:show="show" position="right" :style="{ height: '100%',width:'70%' }">
     <ul>
       <li v-for="(item,index) in searchList" :key="index" :class="{active: checkItem == item}" @click="filCheck(item)">{{item}}</li>
     </ul>
     <section>
       <button @click="show=false">取消</button>
       <button @click="sure">确定</button>
     </section>
 </van-popup>
</template>

<script>
// @ is an alias to /src
import { Popup } from 'vant';
import axios from 'axios';
import { reactive,toRefs,computed } from 'vue';
import cartHeader from '../components/cartHeader.vue';
import cartList from '../components/cartList.vue'
export default {
  name: 'Home',
  components: {
    cartHeader,
    cartList,
    [Popup.name]: Popup
  },
  setup() {
    const data = reactive({
      list:[], // 请求过来的数据
      allList: [], // 总的商品数据
      isPay: true, // 展示支付
      allCheck: false, // 全选的状态
      allPrice: computed(() => {
        let num = 0;
        data.list.forEach(item => {
          if (item.checked){
            num+=item.price*item.num
          }
        })
        return num
      }),
      allNum: computed(() => {
        let num = 0;
        data.list.forEach(item => {
          if (item.checked){
            num+=item.num
          }
        })
        return num
      }),
      show: false,
      // searchList:['海信','海尔','山水','美的'],
      searchList:['2000以内','2000-3000','3000-5000','5000-8000'],
      checkItem: '', // 选中的数据
    })
    axios.get('data.json').then(res => {
      // console.log(res);
      data.list = res.data.cartData;
      data.allList = res.data.cartData;
    })

    const allFtn = () => { // 全选
       data.list.forEach(item => {
         item.checked = data.allCheck
       })
    }
    const btnchange = () => { // 反选的事件
      data.allCheck = data.list.every(item => item.checked);
    }
    const delect = () => {
      if (data.isPay) return;
      data.list = data.list.filter(item => item.checked == false);
    }
    const sure = () => {
      // let str = '123456';
      // console.log(str.includes('7'))
      //  data.list = data.allList.filter(item => item.name.includes(data.checkItem));


       console.log(data.checkItem);
       if (data.checkItem == '2000以内'){
         data.list = data.allList.filter(item => item.price<=2000);
       } else {
         let arr = data.checkItem.split('-');
        //  console.log(arr);
         data.list = data.allList.filter(item => item.price>arr[0]&&item.price<=arr[1]);
       }
       data.show = false;
    }

    const filCheck = (val) => { // 筛选 的 事件
         data.checkItem = data.checkItem == val?'':val;
    }
    return {
      ...toRefs(data),
      allFtn,
      btnchange,
      delect,
      sure,
      filCheck
    }
  }
}
</script>
<style lang="scss" scoped>
  .home{
    background: #e9e9e9;
    overflow: hidden;
    height: 100%;
  }
  .count{
    height: calc(100% - 100px);
    overflow-y: auto;
  }
  .home_foot{
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background: chocolate;
    color: #fff;
  }
  .active{
    color: red;
  }
</style>
